<template>
  <div>
    <el-card>
      <el-row type="flex" justify="space-between" align="middle" class="formdate">
        <el-form
          label-width="80px"
          :inline="true"
        >
          <el-form-item>
            <el-input v-model="form.tagname" placeholder="目录名称" clearable />
          </el-form-item>
          <el-form-item prop="subject_id">
            <el-select v-model="form.subject_id" clearable placeholder="归属学科" @change="clickItem">
              <el-option v-for="item in listt" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item prop="directory_id">
            <el-select v-model="form.directory_id" clearable placeholder="归属目录">
              <el-option v-for="item in nowSubChildren[0].children" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="form.is_show" placeholder="显示状态" clearable>
              <el-option label="显示" value="1" />
              <el-option label="隐藏" value="2" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" plain @click="sousuo">搜索</el-button>
            <el-button @click="resetbtn">重置</el-button>
          </el-form-item>
        </el-form>
        <!-- 右侧按钮 -->
        <div>
          <el-button type="primary" plain size="medium" @click="todoCreate">
            创建标签
          </el-button>
        </div>
      </el-row>
      <!-- 主题表格 -->

      <el-table border style="width: 100%" :data="list">
        <el-table-column type="index" label="序号" width="80" align="center" />
        <el-table-column prop="tag_name" label="标签名称" />
        <el-table-column prop="directory_name" label="归属目录" />
        <el-table-column prop="subject_name" label="归属学科" />
        <el-table-column prop="username" label="创建人" align="center" />
        <el-table-column label="是否显示" align="center">
          <!-- <el-switch v-model="value" active-color="#409eff" /> -->
          <template slot-scope="{row}">
            <el-switch
              :value="row.is_show"
              active-color="#409eff"
              inactive-color="#666"
              inactive-text="否"
              active-text="是"
              :active-value="1"
              :inactive-value="2"
              @change="switchChange(row, $event)"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="{row}">
            <el-button type="primary" icon="el-icon-edit" circle size="small" @click="Edit(row.id)" />
            <el-button type="danger" icon="el-icon-delete" circle size="small" @click="delbtn(row.id)" />
          </template>
        </el-table-column>
      </el-table>
      <!-- /主题表格 -->
      <!-- 分页组件 -->
      <el-row type="flex" justify="end" align="middle" style="height: 60px">
        <el-pagination
          background
          :current-page="page.page"
          :page-sizes="[10,20]"
          :page-size="page.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-row>
    </el-card>
    <tagtc ref="tagtc" :listt="listt" :now-sub-children="nowSubChildren" />
  </div>

</template>

<script>
import { ListList, updateStatus, getSubjectTree, deltag, obtain } from '@/api/tag'
import tagtc from './components/tagtc.vue'
export default {
  components: {
    tagtc
  },
  data() {
    return {
      input: '',
      list: [],
      page: {
        page: 1, // 当前页码
        total: 0, // 总数
        limit: 10// 限制条数
      },
      form: {
        directory_id: '', // 当前目录
        subject_id: '', // 当前学科
        tagname: '', // 标签名称
        is_show: '' // 状态

      },
      nowSubChildren: [{
        children: []
      }],
      listt: []
    }
  },
  created() {
    this.ListList()
    this.getSubjectTree()
  },
  methods: {
    async ListList() { // 渲染标签列表
      const { data } = await ListList(this.page)
      // console.log(data)
      this.list = data.list
      // this.limit = data.limit
      this.page.page = data.page
      this.page.total = data.total
      console.log(this.list)
    },
    async switchChange(row, is_show) { // 开关切换事件
      try {
        await updateStatus({ id: row.id, is_show: is_show })
        this.$message.success('更新用户状态成功')
        row.is_show = is_show
      } catch (error) {
        console.log(error)
      }
    },
    handleCurrentChange(val) { // val是最新页码数
      console.log(val)
      this.page.page = val
      // 判断搜索表单是否有数据存在,如果表单内有数据存在，分页切换时要请求的是筛选后的结果
      this.ListList()
    },
    handleSizeChange(val) { // 最新页显示条数
      console.log(val)
      this.page.limit = val
      console.log(this.page.limit)
      this.ListList()
    },
    async getSubjectTree() { // 获取学科
      const { data } = await getSubjectTree()
      this.listt = data
      console.log(this.listt)
    },
    clickItem() { // 选择框发生改变触发事件
      this.nowSubChildren = this.listt.filter(item => {
        if (item.id === this.form.subject_id) {
          return item
        }
      })
      console.log(this.nowSubChildren)
    },
    async sousuo() { // 条件查询
      const { data } = await ListList({ ...this.form, ...this.page })
      this.subjectTags = data.list
      this.page.total = data.total
      this.page.page = data.page
      console.log(data)
      this.list = data.list
    },
    resetbtn() {
      this.form = {
        directory_id: '', // 当前目录
        subject_id: '', // 当前学科
        tagname: '', // 标签名称
        is_show: '' // 状态

      }
    },
    async delbtn(id) { // 删除
      // console.log(id)
      await this.$confirm('确认删除吗？')
      await deltag(id)
      this.$message.success('删除成功')
      this.ListList()
    },
    todoCreate() { // 点击创建
      this.$refs.tagtc.showCataDialog = true
    },
    async Edit(id) { // 编辑
      const { data } = await obtain(id)
      this.$refs.tagtc.ruleForm = data
      this.$refs.tagtc.showCataDialog = true

      this.nowSubChildren = this.listt.filter(item => {
        if (item.id === data.subject_id) {
          return item
        }
      })
    }
  }

}
</script>

<style>

</style>
